<template>
  <tiny-popover trigger="click" ref="voPopover" :visible-arrow="false" :width="600" :height="600"
    v-model="data.visible">
    <div class="tintPopover">
      <template v-for="(value, keys) in categorys">
        <template v-for="(items, key) in orderKey(value)">
          <div>{{ key }}</div>
          <ul class="auto-wrap-list">
            <template v-for="(item, index) in items">
              <li class="vo_icon" @click="checkedIcon(item.name)">
                <tiny-tooltip placement="bottom" effect="light">
                  <template #content> {{ item.nameCn }}</template>
                  <i :class="iconsClass(item)" style="font-size:24px;color:#40d322;"></i>
                </tiny-tooltip>
              </li>
            </template>
          </ul>
        </template>
      </template>
    </div>
    <template #reference>
      <tiny-input v-model="chanValue" readonly :style="{'--cusWidth': cusWidth}">
        <template #prefix>
          <i :class="iconshow()" style="color:#40d322;" ></i>
        </template>
      </tiny-input>
    </template>
  </tiny-popover>
</template>
<script setup>
import { toRef, reactive, ref, computed } from 'vue';
import { Popover as TinyPopover  } from '@opentiny/vue';
import { categorys } from "@opentiny/icons/categorys";//默认图标库
import "@opentiny/icons/style/all.css"
const voPopover = ref(null);
const props = defineProps({
  value: { type: Object, default: '' },
  data: { type: Object, default: '' },
  icon: { type: String, default: '' },
})
//树状特殊处理
const data = reactive({
  visible: false,
  icon: props.value,
  value:props.value,
  icons: categorys
});
  //key排序
  const orderKey = data=>{
    let  sortedKeys  = Object.keys(data).sort();
    let obj={};
      // 遍历排序后的键，将对应的值添加到结果数组中
      for (const key of sortedKeys ) {
        obj[key]=data[key]
      }
      return obj;
  }
    const cusWidth = toRef(props, 'width');
//显示图标
const checkedIcon = (icon) => {
  data.icon = icon;
  chanValue.value=icon
  data.visible = false;
  voPopover.value.doClose();
}
const iconsClass = (item) => {
  return "ci-" + item.name;
}
//显示图标
const iconshow = () => {
  return "ci-" + props.value;
}
const chanValue = computed({
  get: () => data.icon||props.value,
  set: val => {
    emits('update:value', val);
  },
});
const emits = defineEmits(['update:value']);
</script>

<style lang="scss" scoped>
.title_show{
  display: flex;
  line-height: 30px;
}
.auto-wrap-list {
  overflow: hidden;
  list-style: none;

  border-top: 1px solid var(--tv-base-color-success-3);
  border-left: 1px solid var(--tv-base-color-success-3);
  border-radius: 4px;
  display: grid;

  grid-template-columns: repeat(10, 1fr);

  .vo_icon {
    padding: 10px;
    cursor: pointer;
    border-right: 1px solid var(--tv-base-color-success-3);
    border-bottom: 1px solid var(--tv-base-color-success-3);
    text-align: center;
  }
}
  :deep(.tiny-input) {
    width: var(--cusWidth);
    // width:'100%'
  }
  :deep(.tiny-input-prefix .tiny-input__inner) {
    padding-left: var(--tv-Input-prefix-padding-left);
    padding-right: 0px;
}

.tintPopover {
  height: 580px;
  width: 560px;


  overflow-y: auto;

  /* 隐藏滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }

  -ms-overflow-style: none;
  /* IE 和 Edge */
  scrollbar-width: none;
  /* Firefox */
}
</style>